<template>
	<view class="paybox_wrap">
		<view class="title">
			<view class="title_item">
				<view class="">
					确认支付
				</view>
				<!-- <view class="line"></view> -->
			</view>
			<view class="title_item last" @tap='yincang'>
				<view class="">
					折叠
				</view>
				<image :src=" iconurl + '/static/newImg/zhankai.png'" mode="aspectFill"></image>
			</view>
		</view>
	<!-- 	<view class="border">
			<image :src=" iconurl + '/static/newImg/border.png'" mode="aspectFill"></image>
		</view> -->
		<view style="overflow-y: auto;height: 780rpx;">
			<view class="section_cont">
				<view class="sec_left">
					<image :src="mangheimg" mode="aspectFill"></image>
				</view>
				<view class="sec_right">
					<view class="navname">{{manghename}}</view>
					<view class="name">满意可发货，不满意可置换</view>
					<view class="price-num flex-j-b flex-a-c">
						<view class="price flex-a-c">
							<text class="of-t-w"><text class="paidou">￥</text>{{manghejiage}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_right">
				<view class="bottom_num" :class="{ 'bottom-show': isMaxBeishu }">
					最大倍数为x{{maxbeishu}}
				</view>
				<!-- <u-number-box :step="1" class='bottom_content' color='#000' bg-color='#d8dfeb' size='30' :min='1'
					v-model="manghebs" @change="changeNumber">
				</u-number-box> -->
				<uni-number-box :step="1" class='bottom_content' background="#d8dfeb" color="#000" size='30' :min='1' :max='maxbeishu'
					v-model="manghebsed" @blur="changeNumber" @change="handleManghebsedChange"></uni-number-box>
				<text class="kaixiangtext">倍开箱</text>
				<view class="num">
					获取某一商品数量x{{manghebsed}}
				</view>
				
			</view>
			<view class="bottom_box">
				<view class="bottom_item">
					<view class="bottom_left">
						优惠券
					</view>
					<view class="bottom_text" v-if="xuanzeyouhui" @click='chooseCoupon'>
						- {{cppbox.sub_price}} 大王币
					</view>
					<view class="bottom_right" @click='chooseCoupon' v-else>
						<view class="choose">选择优惠券</view>
						<image :src=" iconurl + '/static/newImg/wei.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="bottom_item">
					<view class="bottom_left">
						合计
					</view>
					<view class="bottom_right">
						<view class="bottom_num1" style="color: #F46E13;">
							￥
						</view>
						<view class="bottom_text" style="font-size: 38rpx;color: #F46E13;" v-if="xuanzeyouhui">
							{{choiceYouHui()}}
						</view>
						<view class="bottom_text" style="font-size: 38rpx;color: #F46E13;" v-else>
							{{(manghejiage * manghebsed).toFixed(2)}}
						</view>
					</view>
				</view>

				<view class="tab_xieyi" @click="handleBox">
					<template v-if="show">
						<image :src="iconurl + '/static/newImg/weixuan.png'" mode="aspectFill"></image>
					</template>
					<template v-else>
						<image :src="iconurl + '/static/newImg/yes.png'" mode="aspectFill"></image>
					</template>
					<view >
							已阅读并同意<text style="color: #6792DD;" @click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
						</view>
				</view>
			</view>
			<view class="but_box">
				<image :src="iconurl + '/static/newImg/openPay.png'" mode="aspectFill" @click='openBox' class="openNew"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['cppbox','boxid','manghebs'],
		data() {
			return {
				box_id: 0,
				priceList: {},
				show: true, //是否勾选协议
				manghename: '',
				// manghetitle:'',
				manghejiage: 0,
				// manghebs: 1,
				manghezj: 0,
				mangheimg: '',
				youhui: 0,
				xuanzeyouhui: false,
				order_id: 0,
				manghebsed: 0,
				maxbeishu:0,//最大倍数
				iconurl: this.$configs.urls,
				isMaxBeishu: false,
			}
		},
		mounted() {
			////console.log('this.cppbox------->>>>>',this.cppbox)
			if( JSON.stringify(this.cppbox) == "{}"){
				this.xuanzeyouhui = false
			}else{
				this.xuanzeyouhui = true
			}
			this.manghebsed = this.manghebs
			this.getlist()
		},
		// beforeDestroy(){
		// 	this.yincang() 
		// },
		methods: {
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			handleManghebsedChange(e) {
				console.log(e,"123213")
				if(this.temp_isTime) {
					clearTimeout(this.temp_isTime)
				}
				this.isMaxBeishu = true
				this.temp_isTime = setTimeout(() => {
					this.isMaxBeishu = false
				}, 3000)
			},
			
			choiceYouHui(){
				let num = (this.manghejiage * this.manghebsed - this.cppbox.sub_price).toFixed(2)
				if(num < 0){
					num = 0
				}
				return num
			},
			changeNumber(e){
				if( e.detail.value > this.maxbeishu){
					uni.showToast({
						title: '已达到最大倍数',
						duration: 2000,
						icon:'none'
					});
				}
			},
			//点击勾选协议
			handleBox() {
				this.show = !this.show
			},
			chooseCoupon() {
				// this.yincang()
				this.$emit('getcpp', this.manghebsed)
			},
			yincang() {
				let show1 = false;
				// this.$parent.zhankaiShow = true
				this.$emit('yincangc', show1)
			},
			getlist() {
				let data = {
					cat_id: 1
				}
				this.$Request.get(this.$api.index.defaultindex, data).then(res => {
					this.priceList = res.data.list
					for (let i = 0; i <= this.priceList.length - 1; i++) {
						if (this.boxid == this.priceList[i].box_id) {
							////console.log(this.priceList[i])
							this.box_id = this.priceList[i].box_id
							this.mangheimg = this.priceList[i].cover_pic
							this.manghename = this.priceList[i].name
							this.maxbeishu =  this.priceList[i].multiple
							this.manghejiage = this.priceList[i].price
						}
					}
				})
				// if (this.showmhjb == true) {
				// 	this.$Request.get(this.$api.index.defaultindex).then(res => {
				// 		this.priceList = res.data.list
				// 		for (let i = 0; i <= this.priceList.length - 1; i++) {
				// 			if (this.swiperCurrent == i) {
				// 				////console.log(this.priceList[i])
				// 				this.box_id = this.priceList[i].box_id
				// 				this.mangheimg = this.priceList[i].cover_pic
				// 				this.manghename = this.priceList[i].name
				// 				this.manghejiage = this.priceList[i].price
				// 			}
				// 		}
				// 	})
				// } else if (this.showmhjb == false) {
				// 	let data = {
				// 		cat_id: 1
				// 	}
				// 	this.$Request.get(this.$api.index.defaultindex, data).then(res => {
				// 		this.priceList = res.data.list
				// 		for (let i = 0; i <= this.priceList.length - 1; i++) {
				// 			if (this.swiperCurrent == i) {
				// 				////console.log(this.priceList[i])
				// 				this.box_id = this.priceList[i].box_id
				// 				this.mangheimg = this.priceList[i].cover_pic
				// 				this.manghename = this.priceList[i].name
				// 				this.manghejiage = this.priceList[i].price
				// 			}
				// 		}
				// 	})
				// }
			},
			openBox() {
				if (this.show == true) {
					uni.showToast({
						title: '请阅读并同意用户协议',
						icon: 'none'
					});
					return
				}
				let data = {
					box_id: this.box_id,
					pay_mode: 1,
					pay_type: 3,
					multiple: this.manghebsed, //倍数
					user_coupon_id: this.cppbox.user_coupon_id,
					invite_code: uni.getStorageSync('invite_code'),
					idef: uni.getStorageSync('idef')
				};
				this.$Request.post(this.$api.mhapi.newSubmit, data).then(res => {
					if (res.data.is_prohibit_pay == 1) {
						uni.navigateTo({
							url: '/userPage/user/balance?fromPage=0&tabIndex=1&heji_num=' + res.data.paidou + '&box_id=' + this.box_id + '&data= ' + JSON.stringify(data)
						});
				
						return;
					}
					if (res.data.status == 1) {
						this.order_id = res.data.order_id
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 1000
						// });
						let data = {
							order_id: this.order_id,
							beishu: this.manghebsed,
							box_id: this.box_id,
						}
						this.$emit('jieguo', data)
						this.xuanzeyouhui = false
						
						// this.$Request.get(this.$api.mhapi.payOrderSu, data).then(res => {
						// 	////console.log(res, 'kaijiang')
						// 	let shuju = res.data.list[0].prize[0]
						// 	let data = {
						// 		beishu: this.manghebs,
						// 		box_id: this.box_id,
						// 		shuju: shuju
						// 	}
						// 	this.$emit('jieguo', data)
						// });
					}
				});
			}
		}
	}
</script>
	
<style lang="scss" scoped>
	.pop_wrap {
		height: 1080rpx;
		// background-image: url('https://pd.pdaxiang.com/upload/static/newImg/popBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 64rpx 0;
	}
	.num {
		width: 290rpx;
    height: 47rpx;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 236rpx;
    bottom: 520rpx;
    /* border-radius: 50rpx; */
    background: #f19613;
    color: white;
    border-radius: 50rpx;
    /* border-radius: 50rpx; */
    align-items: center;
		}

	.tab_xieyi{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 70rpx 20rpx 0rpx 20rpx;
	image{
		width: 40rpx;
		height: 40rpx;
	}
	view{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color:white;
		padding-left: 20rpx;
	}
}

	.section_cont {
		width: 750rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		position: relative;
		background: linear-gradient(90deg, rgba(255, 225, 255, 0.15), rgba(255, 225, 255, 0.15));
		width: 670rpx;
		height: 258rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		.sec_left {
			background-color: white;
		}

		.right_top {
			width: 100rpx;
			height: 50rpx;
			background: #ff5123;
			font-size: 24rpx;
			color: #000;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			border-radius: 20rpx;
		}

		.right_bom {
			display: flex;
			align-items: center;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #a7d402;
			}
		}

		.sec_left {
			image {
				width: 212rpx;
				height: 212rpx;
				border-radius: 8rpx;
			}
		}

		.sec_right {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			color: #ffffff;

			.navname {
				font-size: 30rpx;
				font-weight: 700;
			}

			.name {
				font-size: 26rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin: 30rpx 0;

			}

			.time {
				font-size: 24rpx;
				color: #ff5123;
				margin-top: 15rpx;
			}

			.price-num {
				color: #ffffff;
				.price {
					text {
						max-width: 150rpx;
						font-size: 34rpx;
						color: #21C8C1;
					}

					.of-t-w {
						font-size: 38rpx;
					}

					.paidou {
						font-size: 38rpx;
					}

					margin-top: 10rpx;
				}

				.number {
					font-size: 34rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.bottom_box {
		padding: 30rpx 20rpx;
		background: linear-gradient(90deg, rgba(255, 225, 255, 0.15), rgba(255, 225, 255, 0.15));
		width: 670rpx;
		height: 210rpx;
		margin: 0 auto;
		margin-top: -25rpx;
		border-radius: 10rpx;

		.bottom_item {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.bottom_left {
				width: 120rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #ffffff;
			}

			.bottom_text {
				justify-content: flex-end;
				margin-left: auto;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				line-height: 50rpx;
				font-weight: bold;
				color: #21C8C1;
			}

			.bottom_right {
				justify-content: flex-end;
				margin-left: auto;
				display: flex;
				align-items: center;
				color: #ffffff;

				.bottom_content {
					height: 50rpx;

				}
				
				

				text {
					margin: 0 16rpx;
					font-size: 24rpx;
					height: 50rpx;
					font-weight: bold;
					line-height: 50rpx;
				}


				.bottom_num1 {
					width: 22rpx;
					height: 50rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #21C8C1;
					line-height: 50rpx;
					margin-right: 10rpx;
				}


				image {
					width: 14rpx;
					height: 22rpx;
					margin-top: 20rpx;
					margin-left: 10rpx;
				}

				.choose {
					width: 150rpx;
					height: 28rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #A7C9EB;
				}
			}
		}
	}
	.agreement_box {
		width: 320rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		margin: auto;
		text-align: center;
		z-index: 9999;

		image {
			width: 33rpx;
			height: 33rpx;
			margin-right: 20rpx;
		}

		.text {
			width: 258rpx;
			height: 33rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.but_box {
		width: 100%;
		height: 200rpx;
		// background-image: url('/static/newImg/butBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 300;
		// padding: 30rpx 40rpx 0;

		.change {
			width: 281rpx;
			height: 107rpx;
			margin-top: 40rpx;
		}

		.open {
			width: 360rpx;
			height: 106rpx;
			margin-top: 40rpx;
		}

		.openNew {
			width: 489rpx;
			height: 106rpx;
			margin: 0 auto;
			margin-top: 26rpx;
		}

	}



	.title {
		display: flex;
		align-items: center;
		padding: 0 30rpx 20rpx;

		.title_item {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 50rpx;
			color: #ffffff;

			.line {
				background-color: #30F5FF;
				width: 50rpx;
				height: 8rpx;
				margin-left: 30rpx;
			}
		}

		.title_item:nth-last-child(1) {
			margin-right: 0;
		}

		.last {
			justify-content: flex-end;
			margin-left: auto;
			font-size: 26rpx;
			font-weight: 300;
			display: flex;
			align-items: center;
			color: #ACD6F4;

			image {
				width: 18rpx;
				height: 16rpx;
				margin-left: 12rpx;
			}
		}
	}

	.border {
		width: 670rpx;
		height: 14rpx;
		margin-left: 40rpx;
		margin-bottom: 10rpx;

		image {
			width: 670rpx;
			height: 14rpx;
		}
	}

	.kaixiangtext {
		position: relative;
		left: 372rpx;
		top: -60rpx;
		font-size: 40rpx;
		color: #ffffff;
	}
	.bottom_num {
		width: 238rpx;
		height: 50rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: white;
		line-height: 46rpx;
		text-align: center;
		// background-image: url('https://pd.pdaxiang.com/upload/static/newImg/beishu.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		left: 459rpx;
		visibility: hidden;
	}
	.bottom_num.bottom-show {
		visibility: visible;
	}
</style>
